import * as React from 'react';
import {DragSource} from 'react-dnd';

import dndItemTypes from '../../dnd/dndItemTypes';
import dndSource from '../../dnd/dndSource';
import {IWidget} from './IWidget';

export interface WidgetPaneItemProps {
  widget: IWidget;
  connectDragSource: (elem: JSX.Element) => JSX.Element | null;
}

class WidgetPaneItem extends React.Component<WidgetPaneItemProps, undefined> {
  render() {
    const {widget, connectDragSource} = this.props;
    return connectDragSource(
      <div key={widget.name} className="Widget-item">
        <div className="Widget-item-icon">{widget.icon()}</div>
        <div className="Widget-item-name">{widget.display}</div>
      </div>
    );
  }
}

export default DragSource(dndItemTypes.WIDGET, dndSource.source, dndSource.collect)(WidgetPaneItem);
